<template>
  <div class="filestatistics-data">
    <el-card>
      <div slot="header">
        <tools-btn
          :toolsData="toolsData"
          @addData="addData"
          @refresh="refresh"
          @search="search"
          @fieldSet="fieldSet"
          @hasOperation="hasOperation"
        />
      </div>
      <el-row>
        <el-col :span="12">
          <div id="main" :style="{width: '500px', height: '500px'}"></div>
        </el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import ToolsBtn from "../../components/Tools/ToolsBtn";
export default {
  components: {
    ToolsBtn
  },
  name: "FileStatistics",
  data() {
    return {
      toolsData: {
        title: "案卷统计",
        datatimefier: false,
        datatime: '',
        identifier: false,
        content: "请输入设备号",
        query: '',
        oBtnShow: [
          { btn0: false }, // 新增按钮
          { btn1: false }, // 刷新按钮
          { btn2: false }, // 搜索按钮
          { btn3: false }, // 设置按钮
          { btn4: false } // 导出Excel按钮
        ]
      }
    }
  },
  created(){
    this.drawLine();
  },
  methods: {
    drawLine(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main'))
      console.log(myChart)
      // 绘制图表
      // myChart.setOption({
      //     title: { text: '在Vue中使用echarts' },
      //     tooltip: {},
      //     xAxis: {
      //         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      //     },
      //     yAxis: {},
      //     series: [{
      //         name: '销量',
      //         type: 'bar',
      //         data: [5, 20, 36, 10, 10, 20]
      //     }]
      // });
    },
    // 新增数据
    addData() {
      // console.log("新 增");
      this.handleEdit();
    },
    // 列表数据刷新
    refresh() {
      // console.log("刷 新");
      this.getList(1,50)
    },
    // 搜索
    search() {
      // console.log("搜索");
    },
    // 字段设置
    fieldSet() {
      // console.log("字段设置");
    },
    // 隐藏表格操作列
    hasOperation() {
      // console.log("隐藏表格操作列");
      this.table.hasOperation = !this.table.hasOperation;
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
